<include file="/public/header" />
<style>
    .layui-table-cell {
        overflow: visible;
        text-overflow: inherit;
        white-space: normal;
        height: auto;
        /*在这里设置行高没用*/
    }
</style>
<div class="layui-fluid">
    <div class="layui-card">
        <!-- // 默认操作按钮 -->
        <div class="layui-card-header layadmin-card-header-auto ">
            <div class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select name="status">
                                <option value="">{:__('按状态查询')}</option>
                                <option value="2">{:__('已联系')}</option>
                                <option value="1">{:__('未联系')}</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-inline">
                        <div class="layui-input-inline ">
                            <input name="title" class="layui-input" type="text" placeholder="{:__('订单号|姓名|电话搜索')}" />
                        </div>
                    </div>

                    <div class="layui-inline">
                        <!-- // 默认搜索 -->
                        <button class="layui-btn icon-btn" lay-filter="formSearch" lay-submit><i
                                class="layui-icon layui-icon-search"></i>{:__('搜索')}</button>
                        <!-- // 打开添加页面 -->
                        <button class="layui-btn icon-btn" lay-open="" data-title="{:__('添加')}{:__('预约记录')}"
                            data-url="#editforms" callback="add" lay-event="add">
                            <i class="layui-icon layui-icon-add-1"></i>{:__('添加')}
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- // 创建数据实例 -->
        <table id="lay-tableList" lay-filter="lay-tableList"></table>
    </div>
</div>

<!-- // 添加编辑数据 -->
<script type="text/html" id="editforms">
<div class="layui-fluid layui-bg-white" >
    <form class="layui-form layui-form-fixed" lay-filter="editforms">
    <input type="text" name="id" hidden="">
    <div class="layui-form-item">
        <label class="layui-form-label">{:__('用户')}</label>
        <div class="layui-input-block">
            <input name="name" placeholder="{:__('请输入用户')}" type="text" class="layui-input"  lay-verify="required" />
        </div>
    </div>    
    <div class="layui-form-item">
        <label class="layui-form-label">{:__('电话')}</label>
        <div class="layui-input-block">
            <input name="mobile" placeholder="{:__('请输入用户电话')}" type="text" class="layui-input"  lay-verify="required" />
        </div>
    </div>    
    <div class="layui-form-item">
        <label class="layui-form-label">{:__('施工地址')}</label>
        <div class="layui-input-block">
            <input name="address" placeholder="{:__('请输入施工地址')}" type="text" class="layui-input"  lay-verify="required" />
        </div>
    </div>    
    <div class="layui-form-item">
        <label class="layui-form-label">{:__('预约日期')}</label>
        <div class="layui-input-block">
            <input name="dates" placeholder="{:__('请输入日期')}" data-datetype="date"	 lay-datetime="date" 
            type="text" class="layui-input" data-dateformat="yyyy-MM-dd"  lay-verify="required" />
        </div>
    </div>    
    <div class="layui-form-item">
        <label class="layui-form-label">{:__('施工类型')}</label>
        <div class="layui-input-block">
            <div id="typeNodes" name="types" lay-filter="typeNodes">
                <input type="checkbox" name="types[]" lay-skin="primary" lay-filter="verify" value="旧房墙面翻新" title="旧房墙面翻新"><div class="layui-unselect layui-form-checkbox" lay-skin="primary"><span>旧房墙面翻新</span><i class="layui-icon layui-icon-ok"></i></div><input type="checkbox" name="types[]" lay-skin="primary" lay-filter="verify" value="新房墙面涂刷" title="新房墙面涂刷"><div class="layui-unselect layui-form-checkbox" lay-skin="primary"><span>新房墙面涂刷</span><i class="layui-icon layui-icon-ok"></i></div><input type="checkbox" name="types[]" lay-skin="primary" lay-filter="verify" value="艺术涂料施工" title="艺术涂料施工"><div class="layui-unselect layui-form-checkbox" lay-skin="primary"><span>艺术涂料施工</span><i class="layui-icon layui-icon-ok"></i></div><input type="checkbox" name="types[]" lay-skin="primary" lay-filter="verify" value="整屋防水施工" title="整屋防水施工"><div class="layui-unselect layui-form-checkbox" lay-skin="primary"><span>整屋防水施工</span><i class="layui-icon layui-icon-ok"></i></div><input type="checkbox" name="types[]" lay-skin="primary" lay-filter="verify" value="瓷砖美缝施工" title="瓷砖美缝施工"><div class="layui-unselect layui-form-checkbox" lay-skin="primary"><span>瓷砖美缝施工</span><i class="layui-icon layui-icon-ok"></i></div><input type="checkbox" name="types[]" lay-skin="primary" lay-filter="verify" value="局部坏墙修缮" title="局部坏墙修缮"><div class="layui-unselect layui-form-checkbox" lay-skin="primary"><span>局部坏墙修缮</span><i class="layui-icon layui-icon-ok"></i></div></div>
        </div>
    </div>       
    <div class="layui-form-item">
        <label class="layui-form-label">{:__('联系状态')}</label>
        <div class="layui-input-block">
            <input name="status" type="radio" value="2" title="{:__('已联系')}" checked/>
            <input name="status" type="radio" value="1" title="{:__('未联系')}"/>
        </div>
    </div>  
    <div class="layui-footer layui-form-item layui-center "  >
        <button class="layui-btn layui-btn-primary" type="button" sa-event="closePageDialog" >{:__('取消')}</button>
        <button class="layui-btn" lay-add="{:url('/system/reservation/add')}" lay-edit="{:url('/system/reservation/edit')}" lay-filter="submitPage" lay-submit>{:__('提交')}</button>
    </div>
    </form>
</div>
</script>

<!-- // 列表状态栏 -->
<script type="text/html" id="columnStatus">
    <input type="checkbox" lay-filter="switchStatus" data-url="{:url('/system/reservation/status')}" value="{{d.id}}" lay-skin="switch" {{d.status== 2 ? 'checked':''}}  />
</script>

<!-- // 列表工具栏 -->
<script type="text/html" id="tableBar">
    <a class="layui-table-text" data-title="{:__('编辑')}" callback="edits"  data-url="#editforms" lay-event="edit">{:__('编辑')}</a>
    <div class="layui-divider layui-divider-vertical"></div>
    <a class="layui-table-text" data-url="{:url('/system/reservation/del')}?id={{d.id}}" lay-event="del">{:__('删除')}</a>
</script>

<include file="/public/footer" />
<script>
    layui.use(['admin', 'table', 'form'], function () {
        var admin = layui.admin;
        var table = layui.table;
        var form = layui.form;
        //选择类型
        var draSelect = function (sels) {
            var verify = [
                {
                    type: 1,
                    name: '旧房墙面翻新'
                },
                {
                    type: 2,
                    name: '新房墙面涂刷'
                },
                {
                    type: 3,
                    name: '艺术涂料施工'
                },
                {
                    type: 4,
                    name: '整屋防水施工'
                },
                {
                    type: 5,
                    name: '瓷砖美缝施工'
                },
                {
                    type: 6,
                    name: '局部坏墙修缮'
                },
            ];
            var optionsHtml = "";

            for (const key in verify) {
                var check = verify[key];
                optionsHtml += '<input type="checkbox" name="types[]" lay-skin="primary" lay-filter="verify" value="' + check.name + '"';
                optionsHtml += 'title="' + check.name + '"';
                if (sels.indexOf(check.name) != -1) {
                    optionsHtml += 'checked=""';
                }
                optionsHtml += '>';
            }
            layui.$('#typeNodes').html(optionsHtml);
            form.render();
        }
        /*
         * 初始化表格
        */
        var isTable = table.render({
            elem: "#lay-tableList"
            , url: "{:url('/system/reservation/index')}"
            , page: true
            , limit: 18
            , cols: [[
                { type: 'checkbox', width: 50 },
                { field: 'id', align: 'center', sort: true, width: 80, title: 'ID' },
                { field: 'name', align: 'left', title: '{:__("用户名")}' },
                { field: 'mobile', align: 'left', title: '{:__("联系电话")}' },
                { field: 'address', align: 'left', title: '{:__("施工地址")}' },
                {
                    field: 'address', align: 'left', title: '{:__("施工类型")}', templet: function (d) {
                        var html = '';
                        if (d.types.length == 0) {
                            return '无';
                        }
                        d.types.forEach((val, index, arr) => {
                            html += '<button class="layui-btn layui-btn-xs">' + val + '</button><br/>';
                        })
                        return html;
                    }
                },
                { field: 'dates', align: 'left', title: '{:__("预约日期")}' },
                { field: 'status', align: 'center', templet: '#columnStatus', title: '{:__("联系状态")}' },
                { field: 'create_time', align: 'center', width: 180, title: '{:__("添加时间")}' },
                { align: 'center', toolbar: '#tableBar', width: 160, title: '{:__("操作")}' },
            ]],
            done: function () {
                //当数据渲染完后，执行的回调
            }
        })


        // 添加 / 编辑用户
        admin.callback.add = function (clickthis, colletction, config) {
            draSelect([]);
            // 获取表格对象
            var tableThis = colletction.tableThis,
                status = typeof (tableThis) === "undefined" ? true : false;
            // 监听权限提交
            form.on("submit(submitPage)", function (post) {
                // 获取用户id
                var pageThat = layui.$(this),
                    _pageUrl = !status ? pageThat.attr('lay-edit') : pageThat.attr('lay-add');
                // 开始POST提交数据
                layui.$.post(_pageUrl,
                    post.field, function (res) {
                        if (res.code === 200) {
                            layer.msg(res.msg);
                            // 关闭当前窗口
                            table.reload('lay-tableList');
                            layer.close(colletction.index);
                            pageThat.attr("disabled", true);
                        }
                        else {
                            layer.error(res.msg);
                        }

                    }, 'json');

                return false;
            })
        }

        // 编辑用户
        admin.callback.edits = function (clickthis, colletction, config) {
            // 获取表格对象
            var tableThis = colletction.tableThis,
                status = typeof (tableThis) === "undefined" ? true : false;
            console.log();
            draSelect(tableThis.data.types);
            // 监听权限提交
            form.on("submit(submitPage)", function (post) {
                // 获取用户id
                var pageThat = layui.$(this),
                    _pageUrl = !status ? pageThat.attr('lay-edit') : pageThat.attr('lay-add');
                // 开始POST提交数据
                layui.$.post(_pageUrl,
                    post.field, function (res) {
                        if (res.code === 200) {
                            layer.msg(res.msg);
                            // 关闭当前窗口
                            table.reload('lay-tableList');
                            layer.close(colletction.index);
                            pageThat.attr("disabled", true);
                        }
                        else {
                            layer.error(res.msg);
                        }

                    }, 'json');

                return false;
            })
        }
    })
</script>